<template>
	<view class="content">
		<view class="info-view shadow fadeIn-1s">
			<uni-row>
				<uni-col :span="7">
					<view class="info-view-col-1">
						<view class="info-avatar-add iconfont" @tap="onAddAvatarTap">
							&#xe8a1;
						</view>
						<view class="info-avatar-view">
							<image class="info-avatar" :src="(user != [] && (user.avatar == undefined 
								|| user.avatar == '')) ? '/static/images/hei.png' : user.avatar" 
								@tap="onAvatarTap" mode="aspectFill"></image>
						</view>
					</view>
				</uni-col>
				<uni-col :span="13">
					<view class="info-view-col-2">
						<view class="username-view">
							<text class="username">
								{{ user.username }}
								<text class="iconfont" style="margin-left: 10rpx;"
									:class="user.gender === '女' ? 'color-red' : 'color-blue'">&#xe6ef;</text>
							</text>
						</view>
						<view class="profile-view">
							<u--text class="profile" type="info" size="14" @tap="onProfileTap"
								:text="(user.profile === '' ? '点击这里修改简介' : user.profile)" lines="2"></u--text>
						</view>
					</view>
				</uni-col>
				<uni-col :span="4">
					<view class="info-view-col-3" @tap="onMyInfoTap">
						<text class="iconfont">
							&#xe748;
						</text>
					</view>
				</uni-col>
			</uni-row>
		</view>

		<view class="info-view row-two shadow fadeIn-1s">
			<view class="row-two-top-view" @tap="onMyDataTap(0)">
				<view class="iconfont row-two-top-text">查看更多&#xe77e;</view>
			</view>
			<uni-row>
				<uni-col :span="6">
					<view class="row-two-view" @tap="onMyDataTap(1)" style="border-radius: 0px 0px 0px 20px;">
						<view class="row-two-content">{{ user.fans }}</view>
						<view class="row-two-title">粉丝</view>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-two-view" @tap="onMyDataTap(2)">
						<view class="row-two-content">{{ user.follows }}</view>
						<view class="row-two-title">关注</view>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-two-view" @tap="onMyDataTap(3)">
						<view class="row-two-content">{{ user.likes }}</view>
						<view class="row-two-title">喜欢</view>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="row-two-view" @tap="onMyDataTap(4)" style="border-radius: 0px 0px 20px 0px;">
						<view class="row-two-content">{{ user.collections }}</view>
						<view class="row-two-title">收藏</view>
					</view>
				</uni-col>
			</uni-row>
		</view>
		
		<!-- 按钮 -->
		<view class="me-button-view">
			<view class="me-button shadow fadeIn-1s" @tap="onHeiTap">
				<view class="me-button-icon-view">
					<text class="iconfont me-button-icon">&#xe8b9;</text>
				</view>
				<view class="me-button-title-view">
					<text class="me-button-title">我的嘿文 ({{ heiCount }})</text>
				</view>
				<view class="me-button-right"></view>
			</view>
			
			<view class="me-button shadow fadeIn-1s" @tap="onLogoutTap">
				<view class="me-button-icon-view">
					<text class="iconfont me-button-icon">&#xe7bf;</text>
				</view>
				<view class="me-button-title-view">
					<text class="me-button-title">注销</text>
				</view>
				<view class="me-button-right"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMyInfo
	} from "@/network/UserApi.js";
	import {
		getHeiCount
	} from "@/network/HeiApi.js";
	export default {
		data() {
			return {
				user: [],
				
				// 用户的嘿文数量
				heiCount: 0,
			}
		},

		onLoad() {},

		/**
		 * 下拉刷新事件
		 */
		onPullDownRefresh() {
			this.refreshData();
		},


		mounted() {
			this.toast("欢迎回来");
		},

		onShow() {
			this.refreshData();
		},

		/**
		 * 导航栏按钮点击事件
		 * @param {Object} options
		 */
		onNavigationBarButtonTap(options) {
			let that = this;
			switch (options.index) {
				case 0:
					// 扫码
					uni.scanCode({
						scanType: ["qrCode"],
						success: function(res) {
							// 解密数据
							let qrContent = that.decrypt(res.result);
							// 二维码内容类似于ID[29]，取出29
							let heiId = qrContent.substring(qrContent.indexOf('[') + 1, qrContent.length - 1);
							if (heiId == undefined || heiId == "") {
								that.toast("未识别到嘿文");
								return;
							}
							// 跳转嘿文页面
							uni.navigateTo({
								url: "/pages/hei/hei?heiId=" + heiId
							});
						}
					});
					break;
			}
		},
		methods: {
			/**
			 * 刷新数据
			 */
			refreshData: function() {
				// 获取用户信息
				getMyInfo().then(data => {
					this.user = data.content;
					// 保存用户头像地址到本地
					this.setData("avatar", this.user.avatar);
					this.setData("username", this.user.username);
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
				});
				
				// 获取嘿文数量
				getHeiCount().then(data => {
					this.heiCount = data.content;
				});
			},

			/**
			 * 头像单击事件，预览头像
			 */
			onAvatarTap: function() {
				if (this.user != [] && this.user.avatar != "") {
					uni.previewImage({
						urls: [this.user.avatar],
						current: 0
					});
				}
			},

			/**
			 * 简介点击事件
			 */
			onProfileTap: function() {
				uni.navigateTo({
					url: "/pages/profile/profile?email=" + this.user.email + "&profile=" + this.user.profile
				});
			},

			/**
			 * 添加头像点击事件
			 */
			onAddAvatarTap: function() {
				let that = this;
				uni.chooseImage({
					count: 1,
					// 默认压缩图片
					sizeType: ["compressed"],
					success: function(res) {
						let thatt = that;
						uni.showLoading({
							title: "正在上传",
							mask: true
						});
						// 上传头像
						uni.uploadFile({
							url: that.getUrl() + "/user/uploadAvatar",
							filePath: res.tempFilePaths[0],
							name: "avatar",
							header: {
								"admin-token": that.getLoginToken()
							},
							formData: {
								"email": that.getData("email")
							},
							success: function(res) {
								let data = JSON.parse(res.data);
								// 修改 user 变量中的 avatar 为新的头像地址
								thatt.user.avatar = data.content;
								
								// 保存新的用户头像地址到本地
								thatt.setData("avatar", data.content);
								uni.hideLoading();
								thatt.toast("头像修改成功");
							},
							fail: function(e) {
								uni.showModal({
									title: "头像上传失败",
									content: e.errMsg
								});
								uni.hideLoading();
							}

						});
					}
				})
			},
			
			/**
			 * 个人资料按钮点击事件
			 */
			onMyInfoTap: function() {
				uni.navigateTo({
					url: "/pages/myInfo/myInfo"
				});
			},
			
			/**
			 * 我的数据单击事件
			 * @param {Object} i 
			 * 0：查看更多,1：粉丝，2：关注，3：喜欢，4：收藏
			 */
			onMyDataTap: function(i) {
				uni.navigateTo({
					url: "/pages/myData/myData?mode=" + i
				});
			},
			
			/**
			 * 注销点击事件
			 */
			onLogoutTap: function() {
				let that = this;
				uni.showModal({
					title: "温馨提示",
					content: "确定要注销吗",
					success: function(res) {
						if (res.confirm) {
							that.setLoginToken("");
							uni.reLaunch({
								url: "/pages/index/index"
							});
						}
					}
				})
			},
			
			/**
			 * 我的嘿文点击事件
			 */
			onHeiTap: function() {
				uni.navigateTo({
					url: "/pages/myHei/myHei"
				});
			},
		}
	}
</script>

<style lang="scss">
	*,
	page {
		margin: 0px;
		padding: 0px;
	}

	.content {
		padding: 20rpx;
	}

	.info-view {
		background-color: white;
		border-radius: 20px;
	}

	.info-view-col-1 {
		position: relative;
		width: 220rpx;
		height: 216rpx;
		// background-color: red;
	}

	.info-avatar-add {
		background-color: $u-warning;
		text-align: center;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 999px;
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		position: absolute;
		right: 0px;
		bottom: 10rpx;
		z-index: 99;
	}

	.info-avatar-view {
		position: relative;
	}

	.info-avatar {
		width: 180rpx;
		height: 180rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 10 rpx;
		border-radius: 18px;
	}

	.info-view-col-2 {
		margin-left: 20rpx;
	}

	.username-view {
		margin-top: 30rpx;
	}

	.username {
		font-size: 34rpx;
		font-weight: bold;
	}

	.profile-view {
		margin-top: 10rpx;
	}

	.info-view-col-3 {
		border-radius: 0px 20px 20px 0px;
		height: 220rpx;
		line-height: 220rpx;
		text-align: center;
		transition: ease-out all .3s;
	}

	.info-view-col-3:active {
		background-color: $u-info-light
	}

	.info-view-col-3 text {
		font-size: 44rpx;
		color: $u-info-disabled;
	}

	.row-two {
		margin-top: 30rpx;
		text-align: center;
		height: 230rpx;
		overflow: hidden;
	}
	
	
	.row-two-top-view {
		position: relative;
		border-bottom: solid 1px $u-info-light;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		height: 40rpx;
		transition: ease-out all .2s;
	}
	
	.row-two-top-view:active {
		background-color: $u-info-light;
	}
	
	.row-two-top-text {
		color: var(--contentColor);
		position: absolute;
		right: 40rpx;
		font-size: 24rpx;
	}

	.color-blue {
		color: $u-primary;
	}

	.color-red {
		color: $u-error;
	}

	.row-two-view {
		height: 180rpx;
		transition: ease-out all .2s;
	}
	
	.row-two-view:active {
		background-color: $u-info-light;
	}

	.row-two-title {
		font-size: 26rpx;
		// padding-top: 8rpx;
		color: var(--contentColor);
	}

	.row-two-content {
		font-size: 44rpx;
		padding-top: 28rpx;
		color: var(--titleColor);
	}
	
	.row-two-top-view {
		height: 50rpx;
		line-height: 50rpx;
	}
	
	.me-button-view {
		margin-top: 30rpx;
	}
	
	.me-button {
		background-color: white;
		border-radius: 99px;
		color: var(--titleColor);
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		position: relative;
		transition: ease-out all .2s;
		margin-top: 30rpx;
	}
	
	.me-button:active {
		background-color: $u-info-light;
	}
	
	.me-button-icon {
		font-size: 40rpx;
	}
	
	.me-button-icon-view {
		display: inline-block;
	}
	
	.me-button-title-view {
		display: inline-block;
		margin-left: 20rpx;
		vertical-align: top;
	}
	
	.me-button-right {
		position: absolute;
		right: 40rpx;
		top: calc(50% - 20rpx);
		width: 4rpx;
		height: 40rpx;
		background-color: $u-info-disabled;
		border-radius: 99px;
	}
</style>
